<template>
  <view class="wrapper" :style="{'height':navBarStyle.navHeight}">
  <!-- 不能直接用navBarStyle,与微信小程序不兼容 -->
    <view class="nav" :style="{height:navBarStyle.height,'padding-top':navBarStyle.paddingTop}"
      @click="changeNav(false)">
      <view v-if="showSearch" class="nav-left">
        <view class="iconfont icon-dingwei f16"></view>
        <view class="text margin-left-5">
          南昌市
        </view>
      </view>
      <view v-else class="nav-left">
        <view class="iconfont icon-arrow-left-bold color-2c f20" @click="goBack"></view>
      </view>
      <view class="title">
        <text class="color-2c f16 bold" @click="gotoHome">BestCake</text>
      </view>
      <!-- #ifdef H5 -->
      <view class="nav-right">
        <view v-if="showSearch" class="iconfont icon-sousuo f18" @click="goSearch"></view>
        <view v-else class="cart iconfont icon-gouwuche f20" @click="goCart">
          <view v-if="allInfo.allNum" class="totalNum bgColor-ffe f12">{{allInfo.allNum}}</view>
        </view>
        <view class="line"></view>
        <view class="iconfont icon-caidan f20" @click.stop="changeNav"></view>
      </view>
    </view>
    <view class="menu flex" v-show="isShowNav" @click="changeNav(false)">
      <view class="menu-item flex-1 flex direct-column justify-evenly" v-for="(item,index) in menuList" :key="index"
        @click="goToPages(item)">
        <view :class="['iconfont',item.icon,'f30']"></view>
        <view class="text">{{item.text}}</view>
      </view>
      <!-- #endif -->

    </view>
    <!-- #ifdef H5 -->
    <view class="bg-cover" v-show="isShowNav" @click="changeNav(false)"></view>
    <!-- #endif -->
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    name: "nav-custom",
    data() {
      return {
        menuList: [{
            icon: 'icon-liwuhuodong',
            text: '最新活动',
            pagePath: ''
          },
          {
            icon: 'icon-guanyuwomen',
            text: '关于我们',
            pagePath: ''
          },
          {
            icon: 'icon-peisong',
            text: '配送范围',
            pagePath: '/pagesB/mapArea/mapArea'
          },
          {
            icon: 'icon-geren-copy',
            text: '个人中心',
            pagePath: '/pages/mine/mine'
          }
        ]
      };
    },
    props: {
      showSearch: {
        default: true,
        type: Boolean
      },
      isHome: {
        default: false,
        type: Boolean
      },
    },
    computed: {
      ...mapState('comunication', ['isShowNav']),
      ...mapGetters('cart', ['allInfo']),
      navBarStyle() {
        return {
          height: this.navBarHeight + 'px',
          paddingTop: this.statusBarHeight + 'px',
          navHeight: this.navBarHeight + this.statusBarHeight + 'px'
        };
      },
      statusBarHeight() {
        return uni.getSystemInfoSync().statusBarHeight || 0;
      },
      navBarHeight() {
        const {
          statusBarHeight,
          system
        } = uni.getSystemInfoSync()
        system.toLocaleLowerCase()
        if (system.toLocaleLowerCase().indexOf('ios')) {
          return 44
        } else if (system.toLocaleLowerCase().indexOf('and')) {
          return 48
        } else {
          return 48
        }
      },
    },
    methods: {
      ...mapMutations('comunication', ['changeNav', 'changeTab']),
      gotoHome() {
        uni.switchTab({
          url: '/pages/home/home',
        })
      },
      goBack() {
        if (this.isHome) {
          uni.switchTab({
            url: "/pages/home/home",
          })
        } else {
          uni.navigateBack({
            delta: 1,
          })
        }
      },
      goCart() {
        uni.switchTab({
          url: '/pages/cart/cart',
        })
      },
      goSearch() {
        uni.navigateTo({
          url: '/pagesA/mySearch/mySearch',
        })
      },
      goToPages(item) {
        let pagePath = item.pagePath
        if(pagePath !== '/pages/mine/mine') {
          uni.navigateTo({
            url: pagePath,
          })
        } else {
          uni.switchTab({
            url: pagePath,
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .wrapper {
    position: relative;

    .menu {
      position: fixed;
      z-index: 1100;
      left: 0;
      top: 96rpx;
      width: 100%;
      height: 210rpx;
      background-color: #fff;
      box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);
    }

    .menu-item:nth-child(-n+3) {
      border-right: 1px solid #e9e9e9;
    }

    .bg-cover {
      position: fixed;
      height: 100vh;
      opacity: 0.5;
      background-color: #000;
      left: 0;
      top: 0;
      right: 0;
      margin: 0;
      width: 100%;
      z-index: 10;
    }
  }

  .nav {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    width: 100%;
    //*** 整体宽度不变
    // padding-left:32rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);

    .nav-left {
      flex: 1;
      display: flex;
      align-items: center;
      padding-left: 20rpx;

      .text {
        height: 72rpx;
        line-height: 72rpx;
      }
    }


    .title {
      flex: 2;
      display: flex;
      /*  #ifdef H5 */
      justify-content: center;
      /*  #endif*/

      align-items: center;

      text {
        line-height: 48rpx;
      }
    }

    .nav-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-evenly;

      .cart {
        position: relative;

        .totalNum {
          width: 32rpx;
          height: 32rpx;
          line-height: 32rpx;
          position: absolute;
          left: 75%;
          top: -50%;
          border-radius: 50%;
          color: #000;
        }
      }

      .line {
        width: 2rpx;
        height: 30rpx;
        background-color: #8d8d8d;
      }
    }
  }
</style>
